<!DOCTYPE html>
<html>
	<head>
		<title>JSMuffin Test Page</title>
		<link rel="stylesheet" type="text/css" href="theme.css" />
		<script type="text/javascript" src="lib/muffin.js"></script>
		<script type="text/javascript">
		
		muffin.load('Canvas');
		muffin.load('Bezier');
		
		muffin.DOM.event('load', window, function () {
			var display = new muffin.Canvas({
				width:480,
				frameRate:30 // low frame rate
			}, muffin.DOM.id('container'));
			
			var string = new muffin.Bezier({
				'borderSize':5,
				'borderColor':'green',
				'closePath':false,
				'nodes':new Array({
					'x':50,
					'y':50
				},{
					'x':400,
					'y':50
				})
			});
		
			var factor=3;
			muffin.DOM.event('mousemove', display, function (e) {
				if (this.events.mouseDragged) {
					string.nodes[0].controlX = string.nodes[1].controlX = e.x;
					string.nodes[0].controlY = string.nodes[1].controlY = e.y;
				}
			});
			
			display.addObject(string);
			display.play();
		});
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>